<template>
	<view style="
	width: 700rpx;
	height: 500rpx;
	background-color: #fff;
	border-radius: 30rpx;
	margin: 0 auto;
	">
		<!--      头像         -->
		<view class="touxiang">
			<view style="margin: 60rpx 0 0 20rpx;">头像</view>
			<view @click="toTouXiang">
				<image src="/static/头像.jpg" mode="" 
				style="width: 150rpx;
		            height: 150rpx;
		            border-radius: 100%;"></image>
				<image src="/static/收起箭头小 拷贝@3x.png" mode="" 
				style="width: 20rpx;
				       height: 30rpx;
					   margin: 0 20rpx 50rpx 10rpx"></image>
			</view>

		</view>
		<!--     姓名         -->
		<view class="xingming">
			<view>姓名</view>
			<view>张先生</view>
		</view>
		<!--     电话       -->
		<view class="dianhua" @click="toDianHua">
			<view>电话</view>
			<view>112345678909</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toTouXiang(){
				uni.navigateTo({
					url:"/pages/my/index/message/touXiang/touXiang"
				})
			},
			toDianHua(){
				uni.navigateTo({
					url:"/pages/my/index/message/dianHua/dianHua"
				})
			},

		}
	}
</script>

<style>
	.touxiang{
		display: flex;
		justify-content: space-between;
		border-bottom: 10rpx solid whitesmoke;
		margin: 20rpx;
		padding: 30rpx 0  30rpx 0 ;
	}
	.xingming{
		display: flex;
		justify-content: space-between;
		border-bottom: 10rpx solid whitesmoke;
		margin: 20rpx;
		padding: 25rpx 0  40rpx 0 ;
	}
	.dianhua{
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
		padding: 30rpx 0  30rpx 0 ;
	}

</style>